﻿@{
    Layout = "~/Areas/D3Demo/Views/Shared/_Layout.cshtml";
}

<style>
    svg, g { pointer-events: all; }
    .axis path,
    .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }

    .title { text-anchor: middle; font-weight: 700; }

    .line { fill: none; stroke: steelblue; stroke-width: 1.5px; }

    .linecircle { fill: green; }
        .linecircle:hover { fill: steelblue; }
    .flag { stroke: gray; stroke-dasharray: 5; stroke-width: 1.5; display: none; pointer-events: none; }
    .tips { pointer-events: none; display: none; }
    .tips-border { fill: #F3E4E4; stroke: gray; stroke-width: 2; }
    .grid .tick { stroke: lightgrey; opacity: 0.7; }
    .grid path { stroke-width: 0; }
</style>
<script type="text/javascript">
    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
  width = document.body.clientWidth - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

    var container = d3.select('body')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom);

    var svg = container.append('g')
      .attr('class', 'content')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    var data = Array.apply(0, Array(31)).map(function (item, i) {
        // 产生31条数据
        i++;
        return { date: '2013-12-' + (i < 10 ? '0' + i : i), pv: parseInt(Math.random() * 100) }
    });

    var x = d3.time.scale()
  .domain(d3.extent(data, function (d) { return new Date(d.date); }))
  .range([0, width]);

    var y = d3.scale.linear()
      .domain([0, d3.max(data, function (d) { return d.pv; })])
      .range([height, 0]);

    var xAxis = d3.svg.axis()
          .scale(x)
          .orient('bottom')
          .ticks(31);

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left')
      .ticks(10);

    // 横坐标
    svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis)
      .append('text')
      .text('日期')
      .attr('transform', 'translate(' + width + ', 0)');

    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis)
        .append('text')
        .text('日期')
        .attr('transform', 'translate(' + (width - 20) + ', 0)');
    // 纵坐标
    svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)
      .append('text')
      .text('次/天');

    var line = d3.svg.line()
  .x(function (d) { return x(new Date(d.date)); })
  .y(function (d) { return y(d.pv); })
  .interpolate('linear');

    var path = svg.append('path')
   .attr('class', 'line')
   .attr('d', line(data));


    var g = svg.selectAll('circle')
          .data(data)
          .enter()
          .append('g')
          .append('circle')
          .attr('class', 'linecircle')
          .attr('cx', line.x())
          .attr('cy', line.y())
          .attr('r', 3.5)
          .on('mouseover', function () {
              d3.select(this).transition().duration(500).attr('r', 5);
          })
          .on('mouseout', function () {
              d3.select(this).transition().duration(500).attr('r', 3.5);
          });

    var tips = svg.append('g').attr('class', 'tips');

    tips.append('rect')
      .attr('class', 'tips-border')
      .attr('width', 200)
      .attr('height', 50)
      .attr('rx', 10)
      .attr('ry', 10);

    var wording1 = tips.append('text')
      .attr('class', 'tips-text')
      .attr('x', 10)
      .attr('y', 20)
      .text('');

    var wording2 = tips.append('text')
      .attr('class', 'tips-text')
      .attr('x', 10)
      .attr('y', 40)
      .text('');



    container.on('mousemove', function () {
        var m = d3.mouse(this),
          cx = m[0] - margin.left;

        var x0 = x.invert(cx);
        var i = (d3.bisector(function (d) {
            return new Date(d.date);
        }).left)(data, x0, 1);

        var d0 = data[i - 1],
          d1 = data[i] || {},
          d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        function formatWording(d) {
            return '日期：' + d3.time.format('%Y-%m-%d')(new Date(d.date));
        }
        wording1.text(formatWording(d));
        wording2.text('PV：' + d.pv);

        var x1 = x(new Date(d.date)),
          y1 = y(d.pv);

        // 处理超出边界的情况
        var dx = x1 > width ? x1 - width + 200 : x1 + 200 > width ? 200 : 0;

        var dy = y1 > height ? y1 - height + 50 : y1 + 50 > height ? 50 : 0;

        x1 -= dx;
        y1 -= dy;

        d3.select('.tips')
          .attr('transform', 'translate(' + x1 + ',' + y1 + ')');

        d3.select('.tips').style('display', 'block');
    })
      .on('mouseout', function () {
          d3.select('.tips').style('display', 'none');
      });
</script>